<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../src/jquery.timer-1.0.3.js"></script>
    <script type="text/javascript">
        $(function() {
            // creates a new timer and starts it
            var timer = $.timer(10000, function () {
                $('#ticks').text(this.getCount());
            }).start();
            
            // changes the timer delay
            $('#change-delay').click(function() {
                timer.setDelay($('#delay').val());
            });
            
            // starts or stops the timer
            $('#start-stop').click(function() {
                if (timer.isStopped()) {
                    timer.start();
                } else {
                    timer.stop();
                }
            });
            
            // resumes or pauses the timer
            $('#play-pause').click(function() {
                if (timer.isRunning()) {
                    timer.pause();
                } else {
                    timer.play();
                }
            });
            
            // refreshes the timer info every 100 milliseconds
            $.timer(100, function () {
                $('#start-stop').val(timer.isStopped()? 'Start' : 'Stop');
                $('#play-pause').val(timer.isRunning()? 'Pause' : 'Play');
                
                $('#state').text(timer.getState());
                $('#remaining-time').text((timer.getRemainingTime() / 1000).toFixed(3) + ' sec');
                $('#elapsed-time').text((timer.getElapsedTime() / 1000).toFixed(3) + ' sec');
                $('#current-time').text((timer.getCurrentTime() / 1000).toFixed(3) + ' sec');
            }).start();
        });
    </script>
</head>
<body>
    <p>
        <input id="delay" type="text" value="10000" size="10" /><input id="change-delay" type="button" value="Change delay" />
        <input id="start-stop" type="button" value="Start" />
        <input id="play-pause" type="button" value="Play" />
    </p>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr><td>State:&nbsp;</td><td id="state">&nbsp;</td></tr>
        <tr><td>Remaining time:&nbsp;</td><td id="remaining-time">&nbsp;</td></tr>
        <tr><td>Elapsed time:&nbsp;</td><td id="elapsed-time">&nbsp;</td></tr>
        <tr><td>Current time:&nbsp;</td><td id="current-time">&nbsp;</td></tr>
        <tr><td>Number of 'ticks':&nbsp;</td><td id="ticks">0</td></tr>
    </table>
</body>
</html>
